<template>
	<view>
		<view style="background-color: #fff;">
			<u-tabs v-if="isUse" :list="tabList" lineWidth="50" :current="tabCurrent" @change="tabChange"
				:scrollable="false" lineColor="#FF4110" :activeStyle="{
							color: '#FF4110',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}"></u-tabs>
		</view>
		<scroll-view scroll-y style="height: 85vh;" @scrolltolower="loadMore">
			<view class="listNull" v-if="couponList.length == 0">
				<img src="@/static/images/listNull.png" alt="" />
				<text>暂无优惠券</text>
			</view>
			<view class="item" v-for="(item,index) in couponList" :key="index" @click="currentCoupon(item,index)">
				<view class="moneyCon">
					<view class="money">
						<view v-if="item.couponInfo.ctype=='满减券'">
							<text style="font-size: 18px;">￥</text>
							<text style="font-size: 31px;">{{item.couponInfo.amount}}</text>
						</view>
						<view v-else-if="item.couponInfo.ctype=='折扣券'">
							<text style="font-size: 31px;">{{item.couponInfo.cardDisc}}</text>
							<text style="font-size: 18px;">折</text>
						</view>
						<view v-else>
							<text style="font-size: 18px;">￥</text>
							<text style="font-size: 31px;">{{item.couponInfo.amount}}</text>
						</view>
						<view v-if="item.couponInfo.ctype=='抵扣券'" style="font-size: 12px;">无门槛使用</view>
						<view v-else-if="item.couponInfo.ctype=='折扣券'" style="font-size: 12px;">无门槛使用</view>
						<view v-else style="font-size: 12px;">满{{item.couponInfo.fullAmount}}元可用</view>
					</view>
				</view>
				<view class="text flex-between flex-col">
					<text class="tag">{{item.couponInfo.ctype}}</text>
					<view class="name">{{item.couponInfo.name}}</view>
					<view class="data flex-between">
						<view class="self-center">{{item.couponInfo.endTime}}</view>
						<view class="btn" v-if="item.state==0"> 立即使用</view>
					</view>
				</view>
				<view v-if="item.state!=0" style="position: absolute;top: 4rpx;right: 30rpx;">
					<u-icon v-if="item.state==2" name="yishixiao1" customPrefix="custom-icon" size="40"
						color="#909399"></u-icon>
					<u-icon v-else-if="item.state==1" name="yishiyong3" customPrefix="custom-icon" size="40"
						color="#909399"></u-icon>
				</view>
			</view>
			<!-- 加载状态 -->
			<u-loadmore :status="loadingState" icon-type="circle" />
		</scroll-view>

		<!-- 分页控件 -->
		<u-pagination v-model="page" :page-count="pageCount" :total="pageTotal" mode="button" @change="pageChange" />

	</view>
</template>
<script setup lang="ts">
	import API from "@/api/index.js"
	import { reactive, ref, computed } from "vue"
	import {
		onLoad,
	} from '@dcloudio/uni-app';

	onLoad((option) => {
		// 如果是从油站详情页跳转过来
		if (option.select == 1) {
			// 允许选择优惠券
			isSelect.value = 1
			// 所选金额=>判断是否能使用优惠券
			price.value = option.price
			// 不显示tab栏
			isUse.value = false
			// 增加筛选条件
			condition[2] = {
				"filedIndex": "sid",
				"filedValue": option.sid.toString()
			}
		}
		getList(1)
	})
	// 计算总页数
	const pageCount = computed(() => {
		return Math.ceil(pageTotal.value / pageSize.value)
	})

	let isSelect = ref(0)
	let price = ref(0)
	let page = ref(1)
	let pageSize = ref(10)
	let pageTotal = ref(10)
	let loadingState = ref('loadmore')
	let isUse = ref(true)
	const tabCurrent = ref(0)
	const tabList = reactive([{
		name: '未使用'
	},
	{
		name: '已使用'
	},
	{
		name: '已失效',
	}])

	const tabCurrentTop = ref(0)
	const tabListTop = reactive([{
		name: '油品商城卷'
	}, {
		name: '土特商城卷'
	}])
	let condition = reactive([{
		"filedIndex": "state",
		"filedValue": "0"
	}, {
		"filedIndex": "uId",
		"filedValue": uni.getStorageSync('userInfo').id
	}])
	let couponList = reactive([])
	// 点击当前优惠券
	const currentCoupon = async (item, index) => {
		console.log("当前优惠券信息", price.value, item, index);
		if (isSelect.value == 1) {
			if (item.couponInfo.ctype == '满减券') {
				// 选择满减券时，判断是否符合条件
				if (price.value < item.couponInfo.fullAmount) {
					uni.showToast({
						title: '当前优惠券不符合使用条件！',
						icon: "none"
					})
					return false
				}
			}
			uni.showModal({
				title: '提示',
				content: item.couponInfo.isDeduction ? '确定使用该优惠券？' : '该油站优惠券和油币优惠不可同时享受，确定使用该优惠券？',
				success: function (res) {
					if (res.confirm) {
						uni.$emit('selectCoupon', item)
						uni.navigateBack()
					}
				}
			});
		} else if (isSelect.value != 1 && item.state == 0) {
			let res = await API.getGasStation(item.stationId)
			console.log("res 优惠券对应油站信息", res);
			uni.redirectTo({
				url: '/pages/gas_station_mall/gas_station_detail/index?data=' + JSON.stringify(res.data)
			})
		}
	}
	// 获取优惠券列表
	const getList = async (index) => {
		// 处理中condition中为null的数据
		const conditionArray = condition.filter(item => item !== null);
		try {
			loadingState.value = 'loading'
			let res = await API.userCouponList({
				"pageIndex": index,
				"pageSize": 10,
				"condition": conditionArray
			})

			console.log("getData res", res.data.list);
			if (index == 1) {
				couponList.length = 0
				Object.assign(couponList, res.data.list)
			} else {
				// couponList = [...couponList, ...res.data.list]
				couponList.push(...res.data.list)
			}
			pageTotal.value = res.data.total
			page.value = res.data.currentPage
			loadingState.value = couponList.length >= pageTotal.value ? 'nomore' : 'loadmore'
		} catch (e) {
			loadingState.value = 'error'
		}
	}

	// 页码变化
	const pageChange = (page) => {
		page.value = page
		console.log("页码变化了", page.value);
		getList(page.value)
	}
	// 加载更多（滚动到底部）
	const loadMore = () => {
		console.log("滚动到底了");
		console.log(page.value, pageCount.value);
		if (page.value < pageCount.value) {
			page.value++
			setTimeout(() => {
				getList(page.value)
			}, 1000)
		}
	}

	const tabChangeTop = () => {

	}


	const tabChange = (e) => {
		console.log("切换tabbarl 当前：", e.index);
		tabCurrent.value = e.index
		couponList.length = 0
		if (e.index == 0) {
			// 正常 未使用
			condition[0] = {
				"filedIndex": "state",
				"filedValue": "0"
			}
			// Object.assign(condition, [])
		} else if (e.index == 1) {
			// 已使用
			condition[0] = {
				"filedIndex": "state",
				"filedValue": "1"
			}
		} else {
			// 已失效 过期
			condition[0] = {
				"filedIndex": "state",
				"filedValue": "2"
			}
		}
		getList(1)
	}
</script>

<style lang="scss" scoped>
	.listNull {
		display: flex;
		flex-direction: column;
		text-align: center;
		margin: 0 auto;

		image {
			width: 200rpx;
			height: 200rpx;
			// margin: 10% 0 10% 10%;
			margin: 20rpx auto;
		}

		text {
			color: #919ea9;
		}
	}

	.item {
		padding: 0 30rpx;
		height: 196rpx;
		margin-top: 20rpx;
		display: flex;
		position: relative;

		.moneyCon {
			background-color: $u-primary;
			height: 100%;
			width: 228rpx;

			.money {
				width: 228rpx;
				height: 100%;
				color: #fff;
				font-size: 18px;
				font-weight: 700;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-image: url();
			}
		}

		.text {
			padding: 7px 5px;
			width: 488rpx;
			background-color: #fff;

			.tag {
				// padding: 4rpx 4rpx;
				// border-radius: 10px;
				// font-size: 12px;
				// background-color: #ffddd4;
				// color: #FF4110;
				// border: 1px solid #ffaa93;
				color: #FF4110;
				font-size: 30rpx;
			}


			.name {
				font-size: 24rpx;
			}

			.data {
				font-size: 10px;
				color: #999;
				height: 26px;
				display: flex;
				flex-wrap: nowrap;

				.btn {
					width: 70px;
					height: 22px;
					border-radius: 11px;
					font-size: 11px;
					text-align: center;
					line-height: 22px;
					background-color: $u-primary;
					color: #fff;
				}
			}
		}

	}
</style>